import { View, Image, Text } from '@tarojs/components';
import { AtIcon, AtTag } from 'taro-ui';
import Taro from '@tarojs/taro';
import OrderTimeDown from '../../component/OrderTimeDown';
import QRCode from '../../component/QRCode';
import ProductItem from '../../component/ProductItem';
import OrderAmount from '../../component/OrderAmount';
import OrderUser from '../../component/OrderUser';
import OrderNumber from '../../component/OrderNumber';
import OrderButton from '../../component/OrderButton';
import CallPhone from '../../component/CallPhone';
import OrderAddress from '../../component/OrderAddress';

export default function ({ orderDetail, productInfo, shopInfo, onRefound }) {
  const { address, userName, userPhone, serviceType, orderType } = orderDetail;
  const { phone } = shopInfo;

  const skuInfo = {
    name: productInfo.desc,
    price: productInfo.price,
    count: productInfo.count,
  };
  return (
    <View className="wait-pay-container">
      <OrderTimeDown orderDetail={orderDetail} />
      {serviceType === 1 ? (
        <OrderAddress
          orderType={orderType}
          address={address}
          userName={userName}
          userPhone={userPhone}
        />
      ) : (
        <View>
          <View className="shop-info">
            <View className="shop-name">
              <AtTag type="primary" size="small">
                {orderType === 1 ? '自提门店' : '服务门店'}
              </AtTag>
              <Text>{shopInfo.name}</Text>
            </View>
            <View className="shop-address">{shopInfo.address}</View>
            <View className="iconfont icon-weizhi" />
          </View>
          <OrderUser orderDetail={orderDetail} />
        </View>
      )}
      <CallPhone text="联系门店" phone={phone} />
      {serviceType === 2 && (orderType === 1 || orderType === 4) && (
        <QRCode invalid content={orderDetail.qrcodeContent} orderType={orderType} />
      )}
      <View className="section-block">
        <View className="shop-logo">
          <Image src={shopInfo.logo} />
          <Text>{shopInfo.name}</Text>
          <AtIcon value="chevron-right" size={20} color="#CCCCCC" />
        </View>
        <ProductItem product={productInfo} skuInfo={skuInfo} count={skuInfo.count} />
      </View>
      <OrderAmount orderDetail={orderDetail} />
      <OrderNumber orderDetail={orderDetail} />
      <OrderButton orderDetail={orderDetail} onRefound={onRefound} />
    </View>
  );
}
